import React from 'react'
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Layout, Dropdown, Menu, Space,Avatar } from 'antd';
import { useNavigate } from 'react-router-dom';
import {connect} from 'react-redux'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined
} from '@ant-design/icons';
const { Header } = Layout;
function TopHeader(props) {
  // console.log(props);
  const navigate = useNavigate()

  
  const {role:{roleName},username} =JSON.parse(localStorage.getItem('token'))

  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
          {roleName}
        </a>
      ),
    },
    {
      key: '4',
      danger: true,
      label: '退出',
    },
  ];
   
   const changeCollapsed=()=>{
    //改变state 的状态 isCollapsed
    // console.log(props);
    props.changeCollapsed()
   }


  const onClick = ({ key }) => {
    if(key==='4')
    localStorage.removeItem('token')
    navigate('/login')
  };
  
  return (
    <Header
      className="site-layout-background"
      style={{
        padding: '0 16px',
      }}
    >
      {React.createElement(props.isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: () =>{changeCollapsed()},
      })}
      <div style={{ float: 'right' }}>
        <span>欢迎<span style={{color:'#1890ff'}}>{username}</span>回来</span>
        <Dropdown menu={{ items,onClick}}>
        <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>

    </Header>
  )
}
// connect(
//   // mapStateToProps
//   // mapDispatchToProps
// )(被包装的组件)

const mapStateToProps=({CollApsedReducer:{isCollapsed}})=>{
  // console.log(state);
  return{
    isCollapsed
  }
}

const mapDispatchToProps ={
  changeCollapsed(){
    return{
      type: 'change_collapsed',
      // payload:
    }
  }
}



export default  connect(mapStateToProps,mapDispatchToProps)(TopHeader)